<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue这一块</title>
    <!-- 引入vue -->
    <script src="../../../../1shixun/HTML学习/vue.js"></script>
</head>
<body>
    <div id="app1">
        输入框1:<input type="text" v-model="massage"><br>
        输入框2:<input type="text" v-model="massage"><br>
    </div>
    <script >
        const app1 = new Vue({
            el: '#app1',
            data: {
                "massage": "hello world"
            }
        })
    </script>
    <hr>

    <div id="app2">
        <!-- v-bind：html元素属性值 ；v-model：表单元素的value属性值 -->
        <a v-bind:href="url" v-bind:title="url">链接1</a>
        <a :href="url">链接2</a>  <!--可以省略-->
        <input type="text" v-model="url">  <!--拿v-model绑定的值给url，实现数据的双向绑定-->
    </div>
    <script >
        const app2 = new Vue({
            el: '#app2',
            data: {
                "url": "https://www.baidu.com"
            }
        })
    </script>
    <hr>

    <div id="app3">
        <!-- v-on 绑定事件,后面需要提供事件名称 -->
        <button v-on:click="handle()">按钮1</button>
        <button @click="handle()">按钮2</button>
    </div>
    <script >
        const app3 = new Vue({
            el: '#app3',
            data: {
                "url": "https://www.baidu.com"
            },//,逗号隔开
            methods: {
                handle() {
                    alert("点击了按钮");
                }
            }
        })
    </script>
    <hr>

    <div id="app4">
        <!-- v-if(提供一个表达式，true的时候渲染)与v-show(元素display属性的值)-->
        年龄: <input type="text" v-model="age"></input>,经v-if判定为:
        <span v-if="age <= 35">年轻人（35周岁以下）</span>
        <span v-else-if="age > 35 && age < 60">中年人（35-60）</span>
        <span v-else>老年人（60以上）</span>
        <span style="color: green;">|||</span>
        v-show相同判断:
        <span v-show="age <= 35">年轻人（35周岁以下）</span>
        <span v-show="age > 35 && age < 60">中年人（35-60）</span>
        <span v-show="age >= 60">老年人（60以上）</span><br>
        <p style="color:brown;">但f12后查看器不同:v-show与v-if有区别,v-show只是改变display属性,v-if是删除元素</p>
    </div>
    <script>
        var app4 = new Vue({
            el: "#app4",
            data: {
                age: 18
            }
        })
    </script>
    <hr>

    <div id="app5">
        <!-- v-for遍历 -->
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
            <li>dd</li>
            <li>ee</li>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <ol>
            <li v-for="(item,index) in list">{{index}}:{{item}}</li>
        </ol>
        <div v-for="(item,index) in list">{{index+1}}.{{item}}</div>
    </div>
    <script>
        var app5 = new Vue({
            el: "#app5",
            data: {
                "list":["北京","上海","天津","重庆"]
            }
        })
    </script>
    <hr>
</body>
</html>